<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>角色管理</title>
</head>
<body>
<div layout:fragment="main-container" class="main-container">
    <div id="mdc-data-table" class="mdc-data-table__container">
        <!--扩展搜索条件-->
        <div class="search-container-extend">
        </div>
        <div class="operator-container">
            <div class="btn-container">
                <button class="mdc-button mdc-button--raised" id="refreshBtn">
                    <span class="mdc-button__label">刷新</span>
                </button>
                <a class="mdc-button mdc-button--raised" th:href="@{/manage/role}"
                   sec:authorize="hasAnyAuthority('global:create','role:create')">
                    <span class="mdc-button__label">添加</span>
                </a>
                <button class="mdc-button mdc-button--raised" id="editBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','role:write')">
                    <span class="mdc-button__label">编辑</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="delBtn" disabled
                        sec:authorize="hasAnyAuthority('global:delete','role:delete')">
                    <span class="mdc-button__label">删除</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="menuBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','role:write')">
                    <span class="mdc-button__label">菜单配置</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="privilegeBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','role:write')">
                    <span class="mdc-button__label">权限配置</span>
                </button>
            </div>
            <div class="search-container">
                <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--no-label mdc-ripple-upgraded mdc-text-field--with-trailing-icon"
                     data-mdc-auto-init="MDCTextField">
                    <input type="text" id="criteria" class="mdc-text-field__input"
                           placeholder="请输入名称" autocomplete="off" data-enter-trigger="refreshTable">
                    <i class="material-icons mdc-text-field__icon" tabindex="0" role="button" id="searchBtn">search</i>
                    <div class="mdc-line-ripple"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:fragment="menus" id="menus">
        <div class="mdc-form-field" th:each="m:${ms}">
            <div class="mdc-checkbox">
                <input type="checkbox"
                       class="mdc-checkbox__native-control"
                       th:id="${'checkbox-m'+m.id}"
                       th:value="${m.id}"
                       th:checked="${not #lists.isEmpty(withMenus) and #lists.contains(withMenus,m.id)?'checked':'false'}"/>
                <div class="mdc-checkbox__background">
                    <!--suppress ALL-->
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path" fill="none"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                </div>
            </div>
            <label th:for="${'checkbox-m'+m.id}" th:text="${m.name}"></label>
        </div>
    </div>
    <div th:fragment="privileges" id="privileges">
        <div class="mdc-form-field" th:each="p:${privileges}">
            <div class="mdc-checkbox">
                <input type="checkbox"
                       class="mdc-checkbox__native-control"
                       th:id="${'checkbox-p'+p.id}"
                       th:value="${p.id}"
                       th:checked="${not #lists.isEmpty(withPrivileges) and #lists.contains(withPrivileges,p.id)?'checked':'false'}"/>
                <div class="mdc-checkbox__background">
                    <!--suppress ALL-->
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path" fill="none"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                </div>
            </div>
            <label th:for="${'checkbox-p'+p.id}" th:text="${p.name}"></label>
        </div>
    </div>
</div>
<th:block layout:fragment="script">
    <script type="text/javascript">
      $(function() {
        // 表格初始化
        let mdcDataTable = $('#mdc-data-table').mdcDataTable({
          url: '/manage/role/page',
          queryParams: {},
          container: '#mdc-data-table',
          columns: [
            {
              data: 'name',
            },
            {
              data: 'remark',
            },
          ],
          thead: [
            {
              data: '姓名',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '备注',
              style: 'mdc-data-table__cell--non-numeric',
            },
          ],
          // 是否分页
          pagination: true,
          // 页面数据条数
          pageSize: 5,
          // 设置页面可以显示的数据条数
          pageList: [5, 10, 15, 20],
          // 首页页码
          pageNumber: 1,
          editable: false,
          callback: function() {
          },
          noneSelect: function() {
            $('#editBtn').prop('disabled', true);
            $('#delBtn').prop('disabled', true);
            $('#roleBtn').prop('disabled', true);
            $('#menuBtn').prop('disabled', true);
            $('#privilegeBtn').prop('disabled', true);
          },
          singleSelect: function() {
            $('#editBtn').prop('disabled', false);
            $('#delBtn').prop('disabled', false);
            $('#roleBtn').prop('disabled', false);
            $('#menuBtn').prop('disabled', false);
            $('#privilegeBtn').prop('disabled', false);
          },
          multipleSelect: function() {
            $('#editBtn').prop('disabled', true);
            $('#delBtn').prop('disabled', false);
            $('#roleBtn').prop('disabled', true);
            $('#menuBtn').prop('disabled', true);
            $('#privilegeBtn').prop('disabled', true);
          },
        });
        window.mdcDataTable = mdcDataTable;
        window.refreshTable = function() {
          window.mdcDataTable.refresh({criteria: $('#criteria').val(), page: 1});
        };
        // 刷新,搜索
        $('#refreshBtn,#searchBtn').on('click', refreshTable);
        // 编辑
        $('#editBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length !== 1) {
            $.alert('请选择一条记录');
            return false;
          }
          window.location.href = '/manage/role/' + selectItems[0].id;
        });
        // 删除
        $('#delBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          $.confirm('确认要删除这' + selectItems.length + '条记录么 ?', function() {
            let ids = [];
            selectItems.forEach(function(item) {
              ids.push(item.id);
            });
            $.delete('/manage/role/deleteBatch', {'ids': ids.toString()}, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
              let delCount = selectItems.length;
              mdcDataTable.refresh({}, delCount);
            }, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
            });
          });
        });
        // 菜单配置
        $('#menuBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          let id = selectItems[0].id;
          $('#menus').load('/manage/role/' + id + '/menus', function() {
            let html = $(this).html();
            $(this).empty();
            $(this).hide();
            $.modal(html, function(dom) {
              let menuIds = [];
              $.each($(dom.target).find('.mdc-form-field'), function(index, item) {
                let checkbox = $(item).find('input[id^=checkbox-]');
                if ($.checked(checkbox)) {
                  menuIds.push(checkbox.val());
                }
              });
              $.put('/manage/role/' + id + '/menus', {'menuIds': menuIds.toString()}, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  mdcDataTable.refresh();
                }) : $.alert(res.msg);
              });
            });
          });
        });
        // 权限配置
        $('#privilegeBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          let id = selectItems[0].id;
          $('#privileges').load('/manage/role/' + id + '/privileges', function() {
            let html = $(this).html();
            $(this).empty();
            $(this).hide();
            $.modal(html, function(dom) {
              let privilegeIds = [];
              $.each($(dom.target).find('.mdc-form-field'), function(index, item) {
                let checkbox = $(item).find('input[id^=checkbox-]');
                if ($.checked(checkbox)) {
                  privilegeIds.push(checkbox.val());
                }
              });
              $.put('/manage/role/' + id + '/privileges', {'privilegeIds': privilegeIds.toString()}, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  mdcDataTable.refresh();
                }) : $.alert(res.msg);
              });
            });
          });
        });
      });
    </script>
</th:block>
</body>
</html>
